<template>
	<!-- #ifdef APP-NVUE -->
	<cell>
		<!-- #endif -->
		<view>
			<view v-if="!custom" :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch || !showHover ? '' : 'uni-list-item--hover'" class="uni-list-item" @click="onClick">
				<view class="uni-list-item__container" :class="{ 'uni-list-item--first': isFirstChild }" :style="lineStyle">
					<view v-if="totop">
						<image src="/static/images/others/totop.png" class="totop" />
					</view>
					<view v-if="thumb || icon || avatar" class="uni-list-item__icon" @click="avatarClick">
						<om-avatar :avatarColor="avatarBgColor" :avatarSize="avatarSize" :avatarType="avatarType" :text="avatar" :icon="icon" :thumb="thumb"></om-avatar>
					</view>
					<view v-else >
						<slot name="header"></slot>
					</view>
					<view class="uni-list-item__content">
						<slot/>
						<view class="uni-list-item__content-title">{{ title }}</view>
						<view v-if="note" class="uni-list-item__content-note">{{ note }}</view>
						<view v-else class="uni-list-item__content-note">
							<slot name="note"></slot>
						</view>
					</view>
					<view v-if="extraText || showBadge || showSwitch || showClear" class="uni-list-item__extra">
						<view v-if="lineFeed" class="uni-list-item__content">
							<view class="uni-list-item__extra">
								<text v-if="extraText" class="uni-list-item__extra-text">{{ extraText }}</text>
								<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
								<view class="" v-if="showClear" @click.stop='iconClear'>
									<uni-icons  :size="20" class="uni-icon-wrapper" color="#bbb" type="clear" />
								</view>
							</view>
							<view style="text-align: right;">
								<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
							</view>
						</view>
						<view v-else class="uni-list-item__extra" >
							<text v-if="extraText" class="uni-list-item__extra-text">{{ extraText }}</text>
							<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
							<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
							<view class="" v-if="showClear" @click.stop='iconClear'>
								<uni-icons  :size="20" class="uni-icon-wrapper" color="#bbb" type="clear" />
							</view>
						</view>
					</view>
					<view v-else >
						<slot name="footer"/>
					</view>
						<text v-if="showBtn" style="color:#bbb">{{btnText}}</text>
						<uni-icons v-if="showArrow" :size="25" class="uni-icon-wrapper" color="#939393" type="arrowright" />
				</view>
			</view>
			<view v-else :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch || !showHover ? '' : 'uni-list-item--hover'" class="uni-list-item">
				<view class="uni-list-item__container" :class="{ 'uni-list-item--first': isFirstChild }" :style="lineStyle">
					<slot></slot>
				</view>
			</view>
		</view>
		<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
</template>

<script>
export default {
	name: 'UniListItem',
	props: {
		custom:{
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		}, // 列表标题
		note: {
			type: String,
			default: ''
		}, // 列表描述
		disabled: {
			// 是否禁用
			type: [Boolean, String],
			default: false
		},
		showLine: {
			// 是否显示分割线
			type: [Boolean, String],
			default: true
		},
		lineColor:{
			type:String,
			default:"#d9d9d9"
		},
		showArrow: {
			// 是否显示箭头
			type: [Boolean, String],
			default: true
		},
		showBadge: {
			// 是否显示数字角标
			type: [Boolean, String],
			default: false
		},
		showSwitch: {
			// 是否显示Switch
			type: [Boolean, String],
			default: false
		},
		switchChecked: {
			// Switch是否被选中
			type: [Boolean, String],
			default: false
		},
		showClear: {
			// 是否显示清除图标
			type: [Boolean, String],
			default: false
		},
		showHover: {
			// 是否显示点击效果
			type: [Boolean, String],
			default: true
		},
		extraText: {
			// extra内容
			type: [String,Number,Boolean],
			default: ''
		},
		badgeText: {
			// badge内容
			type: [Number,String],
			default: ''
		},
		badgeType: {
			// badge类型
			type: String,
			default: 'success'
		},
		thumb: {
			// 缩略图
			type: String,
			default: ''
		},
		icon: {
			type: String,
			default: ''
		},
		avatar: {
			type: [String,Number],
			default: ''
		},
		//可用值：sm lg xl
		avatarSize: {
			type: String,
			default: ''
		},
		avatarBgColor: {
			type: String,
			default: 'gray'
		},
		//可用值：'round','radius'
		avatarType:{
			type: String,
			default: 'round'
		},
		showBtn:{
			type:Boolean,
			default:false
		},
		btnText:{
			type:String,
			default:'去交接'
		},
		lineFeed:{
			type:Boolean,
			default:false
		},
		totop:{
			type:Boolean,
			default:false
		},
	},
	inject: ['list'],
	computed:{
		lineStyle() {
			// if(this.showLine){
			// 	return `border-bottom: 1px solid ` + this.lineColor
			// }else{
			// 	return ``
			// }
			return ``
		}
	},
	data() {
		return {
			isFirstChild: false
		};
	},
	mounted() {
		if (!this.list.firstChildAppend) {
			this.list.firstChildAppend = true;
			this.isFirstChild = true;
		}
	},
	methods: {
		btnClick(){
			this.$emit('btnClick');
		},
		onClick() {
			this.$emit('click');
		},
		onSwitchChange(e) {
			this.$emit('switchChange', e.detail);
		},
		iconClear(){
			this.$emit('iconClear');
		},
		avatarClick(){
			this.$emit('avatarClick');
		}
	}
};
</script>

<style lang="scss" scoped>
@import '~@/uni.scss';

$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;

	.cmd-avatar-img {
		width: 100%;
		height: 100%;
	}

.uni-list-item {
	font-size: $uni-font-size-lg;
	position: relative;
	flex-direction: column;
	justify-content: space-between;
	padding-left: $uni-spacing-row-lg;
}

.uni-list-item--disabled {
	opacity: 0.3;
}

.uni-list-item--hover {
	background-color: $uni-bg-color-hover;
}

.uni-list-item__container {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	padding: $list-item-pd;
	padding-left: 0;
	flex: 1;
	position: relative;
	justify-content: space-between;
	align-items: center;
	border-top-color: $uni-border-color;
}
.uni-list-item__container::after{
	content: " ";
	position: absolute;
	bottom: 0;
	right: 0;
	height: 1px;
	border-bottom: 1px solid #d9d9d9;
	color: #d9d9d9;
	transform-origin: 0 100%;
	transform: scaleY(.5);
	left: 0;
}

.uni-list-item--first {
	border-top-width: 0px;
}

.uni-list-item__content {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	overflow: hidden;
	flex-direction: column;
	color: #3b4144;
}

.uni-list-item__content-title {
	font-size: $uni-font-size-base;
	color: #3b4144;
	overflow: hidden;
}

.uni-list-item__content-note {
	margin-top: 3px;
	color: $uni-text-color-grey;
	font-size: $uni-font-size-sm;
	overflow: hidden;
}

.uni-list-item__extra {
	// width: 25%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.uni-list-item__extra-text {
	color: $uni-text-color-grey;
	font-size: $uni-font-size-base;
}

.uni-list-item__icon {
	margin-right: 9px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.uni-list-item__icon-img {
	height: $uni-img-size-base;
	width: $uni-img-size-base;
}
.totop{
	position: absolute; 
	right: 0; 
	top: 0; 
	width: 32px;
	height: 32px;
}
</style>
